<template>
    <div class="home">
        <div class="notify-container">
            <div class="notifications" v-if="pushs.length>0">
                <div class="prefix head"><span>1/{{pushs.length}}</span>{{pushs[0].content}}</div>
                <div class="operate">
                    <a-button type="primary" @click="updatePush(pushs[0].id,1)">确定</a-button>
                    <div class="linked-buttons image" @click="active = !active" :class="{active: active}"
                         v-if="pushs.length>1">
                    </div>
                </div>
            </div>
            <transition name="show">
                <div v-if="active" class="list">
                    <div class="notifications"  v-for="(v,k) in restPushs">
                        <div class="prefix"><span>{{k+2}}/{{pushs.length}}</span>{{v.content}}</div>
                        <a-button type="primary" @click="updatePush(v.id,1)">确定</a-button>
                    </div>
                </div>  
            </transition>
        </div>
        <order></order>
    </div>
</template>

<script>
    import Order from "../../components/index/order";

    export default {
        components: {Order},
        data() {
            return {
                pushs: [],
                active: false,
            };
        },
        mounted() {
            this.getPush()
        },
        beforeDestroy() {
        },
        methods: {
            getPush() {
                this.http('get', 'index/push').then(res => {
                    this.pushs = res
                })
            },
            updatePush(id, status) {
                this.http('put', 'push/update?id=' + id, {status: status}).then(res => {
                    this.getPush()
                })
            }
        },
        computed: {
            restPushs() {
                return this.pushs.slice(1);
            }
        },
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .home {
        padding: 20px 30px;

        & > .notify-container {
            margin: -44px -54px 20px -54px;
            position: relative;
            & > .notifications {
                @include fj(space-between);
                align-items: center;
                padding: 5px 20px;
                border-bottom: 4px solid #1E2026;
                & > .prefix {
                    span {
                        margin-right: 10px;
                    }
                }

                .operate {
                    @include fj(space-between);
                    align-items: center;
                }
            }
            & > .list {
                position: absolute;
                z-index: 1;
                width: 100%;
                & > .notifications {
                    padding: 5px 20px;
                    background: #293043;
                    transition: all .8s ease;
                    @include fj(space-between);
                    align-items: center;
                    border-bottom: 4px solid #1E2026;

                    & > .prefix {
                        span {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }

    .show-enter-active {
        transition: all 0.3s ease;
    }

    .show-leave-active {
        transition: all 0.3s ease;
    }

    .show-enter, .show-leave-to {
        transform: translateY(-10px);
        opacity: 0;
    }

    .image {
        @include wh(30px, 30px);
        background: url("../../assets/images/arrow-down.svg") center no-repeat;
        margin-left: 15px;
        cursor: pointer;
        @include transition(transform, .3s, cubic-bezier(0.645, 0.045, 0.355, 1));

        &.active {
            transform: rotate(-180deg);
            -webkit-transform: rotate(-180deg);
            -moz-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
        }
    }

</style>
